<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <title>index demo</title>
  <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="index.css">
<body @resize="resize()">
<div id="container" class="cm-content">
  <div id="header">
    <div class="cm-content">
      <div class="search">
        <div class="input">
          <label for="search"><i class="fa fa-search blue"></i></label>
          <input @focus="focus" name="search" placeholder="搜索一下">
        </div>
      </div>
    </div>
    <div class="header-result" :style="search.style">
      <div class="header-result-search">
        <div class="cm-content">
          <div class="search">
            <div class="input">
              <span class="go" @click="go">
                <i class="fa fa-chevron-left blue"></i>
              </span>
              <input id="search" v-model="search.text" placeholder="搜索一下" />
              <span class="del" @click="search.text = ''" v-show="search.text != ''">
                <i class="fa fa-close"></i>
              </span>
              <span @click="searchFunc" class="submit">搜索</span>
            </div>
          </div>
        </div>
      </div>
      <div class="cm-content">
        <div class="header-result-loading" v-show="search.isShow == 'loading'">
          <div class="loading">
            <i class="fa fa-spinner fa-pulse fa-3x fa-fw blue"></i>
            <span>正在加载中...</span>
          </div> 
        </div>
        <div class="header-result-tip" v-show="search.isShow == 'default'">
          <div class="header-result-tip-item">
            <h3>热门搜索</h3>
            <div class="content">
              <span>小米5</span>
              <span>红米4x</span>
              <span>联想雷神5x</span>
              <span>小米笔记本Air</span>
              <span>小米充电宝</span>
              <span>外星人</span>
            </div>
          </div>
          <div class="header-result-tip-item">
            <h3>搜索记录</h3>
            <div class="list">
              <div class="item fa" v-for="item in search.history">{{item}}</div>
            </div>
            <div class="clear"><span>清除历史纪录</span></div>
          </div>  
        </div>
        <div class="header-result-content" v-show="search.isShow == 'result'">
          <div class="nav">
            <div class="cm-content">
              <div class="left" :class="{active: search.navCount == 0}">
                <a @click="change(0,true)">综合</a>
              </div>
              <div class="left" :class="{active: search.navCount == 1}">
                <a @click="change(1,search.isTop)">
                  价格
                  <i class="fa fa-sort-up" :class="{'blue': !search.isTop && search.navCount == 1}"></i>
                  <i class="fa fa-sort-down" :class="{'blue': search.isTop && search.navCount == 1}"></i>
                </a>
              </div>
              <div class="left" :class="{active: search.navCount == 2}">
                <a @click="change(2,true)">
                  筛选<i class="fa fa-filter" :class="{'blue': search.navCount == 2}"></i>
                </a>
              </div>
            </div>
          </div>
          <div class="list">
            <div class="item">
              <div class="img left">
                <img src="img/note2.png"/>
              </div>
              <div class="text left">
                <div class="name"><span>小米note2</span></div>
                <div class="desc">
                  <span>双曲面</span>
                  <span>对称美学</span>
                  <span>温润-超薄</span>
                  <span>骁龙821 性能版</span>
                </div>
                <div class="price">
                  <span class="red"><i class="fa fa-yen red"></i>1799</span>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="img left">
                <img src="img/note2.png"/>
              </div>
              <div class="text left">
                <div class="name"><span>小米note2</span></div>
                <div class="desc">
                  <span>双曲面</span>
                  <span>对称美学</span>
                  <span>温润-超薄</span>
                  <span>骁龙821 性能版</span>
                </div>
                <div class="price">
                  <span class="red"><i class="fa fa-yen red"></i>1799</span>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="img left">
                <img src="img/note2.png"/>
              </div>
              <div class="text left">
                <div class="name"><span>小米note2</span></div>
                <div class="desc">
                  <span>双曲面</span>
                  <span>对称美学</span>
                  <span>温润-超薄</span>
                  <span>骁龙821 性能版</span>
                </div>
                <div class="price">
                  <span class="red"><i class="fa fa-yen red"></i>1799</span>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="img left">
                <img src="img/note2.png"/>
              </div>
              <div class="text left">
                <div class="name"><span>小米note2</span></div>
                <div class="desc">
                  <span>双曲面</span>
                  <span>对称美学</span>
                  <span>温润-超薄</span>
                  <span>骁龙821 性能版</span>
                </div>
                <div class="price">
                  <span class="red"><i class="fa fa-yen red"></i>1799</span>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="img left">
                <img src="img/note2.png"/>
              </div>
              <div class="text left">
                <div class="name"><span>小米note2</span></div>
                <div class="desc">
                  <span>双曲面</span>
                  <span>对称美学</span>
                  <span>温润-超薄</span>
                  <span>骁龙821 性能版</span>
                </div>
                <div class="price">
                  <span class="red"><i class="fa fa-yen red"></i>1799</span>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="img left">
                <img src="img/note2.png"/>
              </div>
              <div class="text left">
                <div class="name"><span>小米note2</span></div>
                <div class="desc">
                  <span>双曲面</span>
                  <span>对称美学</span>
                  <span>温润-超薄</span>
                  <span>骁龙821 性能版</span>
                </div>
                <div class="price">
                  <span class="red"><i class="fa fa-yen red"></i>1799</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
  var vm = new Vue({
    el: '#header',
    data: {
      search: {
        text: '',
        history: [
          '小米充电宝', '小米笔记本Air', '外星人', 'Apple'
        ],
        style: {
          opacity: '1',
          left: '0'
        },
        isShow: 'result',
        navCount: 0,
        isTop: true
      }
    },
    created: function() {
    },
    mounted: function() {
    },
    methods: {
      searchFunc: function() {
        if(this.search.text == '') return ;
        this.search.isShow = 'loading';
        this.search.isShow = 'result';
      },
      focus: function() {
        this.search.style.left = "0%";
        this.search.style.opacity = '1.0';
        document.querySelector('#search').focus();
      },
      go: function() {
        this.search.style.left = "100%";
        this.search.style.opacity = '0';
        this.search.isShow = 'default';
      },
      change: function(index, bool) {
        this.search.navCount = index;
        if (index == 1) {
          this.search.isTop = !this.search.isTop;
          return ;
        }
        this.search.isTop = bool;
      }
    },
    watch: {
    }
  });
</script>
</html>